<template>
  <!-- 新增员工对话框 -->
  <el-dialog
        title="新增员工(统一新密码:111111)"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>

        <el-form ref="form" :model="form" label-width="110px">
            <el-form-item label="上传头像">
                <el-upload
                    :action="objData.host"
                    :data="objData"
                    :before-upload="getOSS"
                    :file-list="fileList"
                    :on-success="onSuccess"
                    list-type="picture"
                    width="78%">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件
                        <span style="color: red;">(不上传则为默认头像)</span>
                    </div>
                </el-upload>
            </el-form-item>

            <el-form-item label="用户名">
                <el-input v-model="form.username" style="width: 270px;"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="form.sex" style="width: 270px;"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input type="number" v-model.number="form.age" style="width: 270px;"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="form.phone" style="width: 270px;"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.address" style="width: 270px;"></el-input>
            </el-form-item>
            <el-form-item label="负责区域">
                <el-input v-model="form.area" style="width: 270px;"></el-input>
            </el-form-item>
            <el-form-item label="身份证">
                <el-input v-model="form.id_card" style="width: 270px;"></el-input>
            </el-form-item>
            <el-form-item label="所属管理员">
                <el-select v-model="form.admin_id" placeholder="请选择所属管理员" style="width: 270px;">
                <el-option :label="item.username" :value="item.id" v-for="item in adminList" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addEmployee">添 加</el-button>
        </span>
    </el-dialog>

</template>

<script>
    import myAxios from "@/tools/myAxios";
    import Qs from 'qs';
    import axios from "axios";
    import {nanoid} from 'nanoid';
    axios.defaults.withCredentials = true;
    export default {
        name:'EmployeeManageAdd',
        data() {
            return {
                // 对话框的展示
                centerDialogVisible: false,
                // 所有管理员信息
                adminList:[],
                // 收集数据
                form:{
                    username:'',
                    sex:'',
                    age:null,
                    phone:'',
                    address:'',
                    area:'',
                    id_card:'',
                    admin_id:null,
                    photo_url:''    // 当前上传的头像的url
                },
                // 头像的预览
                fileList: [],
                // 图片上传后端签名数据
                objData:{
                    OSSAccessKeyId:'',
                    policy:'',
                    Signature:'',
                    key:'',
                    dir:'',
                    host:''
                },

                myUUID:'',       // uuid
                myData:'',       // images/当前时间/
            }
        },
        watch:{
            centerDialogVisible(newValue,oldValue){
                // 每次打开对话框时都进行初始化
                if(newValue){
                    this.form = {
                        username:'',
                        sex:'',
                        age:null,
                        phone:'',
                        address:'',
                        area:'',
                        id_card:'',
                        admin_id:null,
                        photo_url:''
                    }
                }
            }
        },
        methods:{
            // 确定添加按钮
            addEmployee(){
                if(this.form.username.trim() === '' || this.form.sex.trim() === '' ||
                   this.form.age === null           || this.form.phone.trim() === '' ||
                   this.form.address.trim() === ''  || this.form.area.trim() === '' ||
                   this.form.id_card.trim() === ''  || this.form.adminId === null){

                        // 提示一下
                        this.$message({
                            showClose: true,
                            message: '请填写完整信息(头像选填)!',
                            type: 'error'
                        });
                   }
                
                // 添加员工
                myAxios(
                    'http://localhost:8088/employee/addemployee',
                    'post',
                    Qs.stringify(this.form),
                    (data)=>{
                        window.location.reload();
                        // 提示一下
                        this.$message({
                            message: '添加员工成功!',
                            type: 'success'
                        });
                    }
                )
            },
            // 拿到oss的服务端签名
            getOSS(file){
                let _this = this;
                return new Promise((resolve,reject)=>{
                    // 请求后端
                    axios({
                        url:'http://localhost:8088/oss/policy',
                        method:'get',
                        headers:{
                            Authorization: localStorage.getItem('token')
                        }
                    }).then(
                        response => {
                            _this.objData.OSSAccessKeyId = response.data.data.accessId;
                            _this.objData.policy = response.data.data.policy;
                            _this.objData.Signature = response.data.data.signature;
                            _this.objData.dir = response.data.data.dir;
                            _this.objData.host = response.data.data.host;                           // 直传oss地址
                            _this.myUUID = nanoid();      // uuid
                            _this.objData.key = response.data.data.dir+_this.myUUID+"${filename}";      // 文件名,使用nanoid生成唯一值
                            _this.myData = response.data.data.dir;     // images/时间/
                            resolve(true);   // 继续上传
                        },
                        error => {
                            console.log(error.message);
                            reject(false);   // 停止上传
                        }
                    )
                });
            },
            // 图片上传成功时调用
            onSuccess(response, file, fileList){
                if(fileList.length > 1){
                    fileList.shift();
                }
                this.form.photo_url = 'https://pension-system-wj.oss-cn-beijing.aliyuncs.com/'+this.myData+this.myUUID+file.name;
            },
            // 新增员工对话框的事件回调
            addFunction(data){
                this.centerDialogVisible = data;
            },
        },
        mounted(){
            // 绑定自定义事件
            this.$bus.$on('addEmployeeOnEmployeeManage',this.addFunction);

            // 获取所有的管理员信息
            myAxios(
                'http://localhost:8088/admin/getalladmin',
                'get',
                null,
                (data)=>{
                    this.adminList = data;
                }
            )
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('addEmployeeOnEmployeeManage');
        }
    }
</script>

<style>
</style>